import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { useRequest } from '@umijs/hooks';
import React, { useState, useRef, useCallback, useEffect } from 'react';

import { Input, Modal ,DatePicker, Select, Row, Col, } from 'antd';
import { queryCityInfo } from '../service';


const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;

const UpdateForm = props => {
  const {updateData, updateModalVisible, form, onCancel, onSubmit: handleUpdate} = props

  // 保存
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleUpdate({...updateData, ...fieldsValue});
    });
  };

  const formLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };

  return (
    <Modal
      centered={true}
      destroyOnClose={true}
      title="编辑超售信息"
      visible={updateModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Row style={{marginBottom: '10px'}}>
        <Col span={6} style={{textAlign: 'right', color: 'rgba(0,0,0,0.85)'}}>航班号：</Col>
        <Col span={16}>{updateData.flightNum}</Col>
      </Row>
      <Row style={{marginBottom: '10px'}}>
        <Col span={6} style={{textAlign: 'right', color: 'rgba(0,0,0,0.85)'}}>航班日期：</Col>
        <Col span={16}>{updateData.flightDate}</Col>
      </Row>
      <Row style={{marginBottom: '10px'}}>
        <Col span={6} style={{textAlign: 'right', color: 'rgba(0,0,0,0.85)'}}>出发航站：</Col>
        <Col span={16}>{updateData.airportS}</Col>
      </Row>
      <Row style={{marginBottom: '10px'}}>
        <Col span={6} style={{textAlign: 'right', color: 'rgba(0,0,0,0.85)'}}>到达航站：</Col>
        <Col span={16}>{updateData.airportE}</Col>
      </Row>
      <FormItem
        {...formLayout}
        label="可提供座位数"
      >
        {form.getFieldDecorator('seatCountDesc', {
          initialValue: updateData.seatCountDesc,
          rules: [
            {required: true, message: '请输入可提供座位数！'},
          ],
        })(<Input placeholder="请输入" />)}
      </FormItem>
      <FormItem
        {...formLayout}
        label="预计超售人数"
      >
        {form.getFieldDecorator('plancount', {
          initialValue: updateData.plancount,
          rules: [
            {required: true, message: '请输入预计超售人数！'},

          ],
        })(<Input placeholder="请输入" />)}
      </FormItem>
      <FormItem
        {...formLayout}
        label="实际超售人数"
      >
        {form.getFieldDecorator('actcount', {
          initialValue: updateData.actcount,

          rules: [

          ],
        })(<Input  placeholder="请输入" />)}
      </FormItem>
      <FormItem
        {...formLayout}
        label="补偿金额"
      >
        {form.getFieldDecorator('amountPaid', {
          initialValue: updateData.amountPaid,
          rules: [
            // {pattern: /^[0-9]{1,4}$/, message: '补偿金额最高为'},
          ],
        })(<Input  placeholder="请输入" />)}
      </FormItem>
      <FormItem
        {...formLayout}
        label="旅客处理情况"
      >
        {form.getFieldDecorator('note', {
          initialValue: updateData.note,
          rules: [
            // {required: true, message: '请输入旅客处理情况！'},

          ],
        })(<TextArea rows={4} placeholder="请输入" />)}
      </FormItem>
    </Modal>
  )

}

export default Form.create()(UpdateForm);
